<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card
      class="general-card"
      :title="$t('multiDAnalysis.card.title.contentPublishingSource')"
    >
      <Chart style="width: 100%; height: 300px" :option="chartOption" />
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import useChartOption from '@/hooks/chart-option';
  import { getDailyIncomeStatisticsListByQuery } from '@/api/dashboard';

  const { loading } = useLoading(false);
  const goodsTypes: number[] = [1, 5, 7, 8, 12]; // 需要请求的五个goodsType
  const colorObject: any = {
    微信小程序: '#249EFF',
    微信APP: '#FFA500',
    微信公众号: '#846BCE',
    支付宝小程序: '#21CCFF',
    支付宝APP: '#0E42D2',
    支付宝公众号: '#FF6347',
  };
  const type1Arr: any = ref([{value:653},{value:9857},{value:2145},{value:6547},{value:12},{value:3654}]);
  const type5Arr: any = ref([{value:9857},{value:653},{value:2145},{value:3654},{value:12},{value:6547}]);
  const type7Arr: any = ref([{value:653},{value:9857},{value:2145},{value:6547},{value:12},{value:3654}]);
  const type8Arr: any = ref([{value:653},{value:3654},{value:2145},{value:6547},{value:12},{value:9857}]);
  const type12Arr: any = ref([{value:6547},{value:9857},{value:2145},{value:653},{value:12},{value:3654}]);

  // @ts-ignore
  const { chartOption } = useChartOption((isDark) => {
    const graphicElementStyle = {
      textAlign: 'center',
      fill: isDark ? 'rgba(255,255,255,0.7)' : '#4E5969',
      fontSize: 14,
      lineWidth: 10,
      fontWeight: 'bold',
    };
    return {
      legend: {
        left: 'center',
        data: [
          '微信小程序',
          '微信APP',
          '微信公众号',
          '支付宝小程序',
          '支付宝APP',
          '支付宝公众号',
        ],
        bottom: 0,
        icon: 'circle',
        itemWidth: 8,
        textStyle: {
          color: isDark ? 'rgba(255,255,255,0.7)' : '#4E5969',
        },
        itemStyle: {
          borderWidth: 0,
        },
      },
      tooltip: {
        show: true,
        trigger: 'item',
      },
      graphic: {
        elements: [
          {
            type: 'text',
            left: '8.3%',
            top: 'center',
            style: {
              text: '停车缴费',
              ...graphicElementStyle,
            },
          },
          {
            type: 'text',
            left: '28%',
            top: 'center',
            style: {
              text: '套餐缴费',
              ...graphicElementStyle,
            },
          },
          {
            type: 'text',
            left: '48%',
            top: 'center',
            style: {
              text: '优惠券充值',
              ...graphicElementStyle,
            },
          },
          {
            type: 'text',
            left: '68%',
            top: 'center',
            style: {
              text: '汽车充电',
              ...graphicElementStyle,
            },
          },
          {
            type: 'text',
            left: '87.8%',
            top: 'center',
            style: {
              text: '电动车充电',
              ...graphicElementStyle,
            },
          },
        ],
      },
      series: [
        initializeSeriesData(isDark, '10%', type1Arr.value),
        initializeSeriesData(isDark, '30%', type5Arr.value),
        initializeSeriesData(isDark, '50%', type7Arr.value),
        initializeSeriesData(isDark, '70%', type8Arr.value),
        initializeSeriesData(isDark, '90%', type12Arr.value),
      ],
    };
  });

  const initializeSeriesData = (
    isDark: boolean,
    leftOffset: string,
    targetArray: any
  ) => {
    return {
      type: 'pie',
      radius: ['50%', '70%'],
      center: [leftOffset, '50%'],
      label: {
        formatter: '{d}% ',
        color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969',
      },
      itemStyle: {
        borderColor: isDark ? '#000' : '#fff',
        borderWidth: 1,
      },
      data: targetArray,
    };
  };

  const getCurrentDateNumbers = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const day = now.getDate();
    return { year, month, day };
  };

  // 统一请求不同goodsType数据
  const fetchDataPromise = async (goodsTypes: number[]) => {
    const { year, month, day } = getCurrentDateNumbers();
    const promises = goodsTypes.map(async (type) => {
      const { code, data } = await getDailyIncomeStatisticsListByQuery({
        page: 1,
        size: 200,
        year,
        month,
        date: day,
        statisticalModel: 'statistical_model_sum_day',
        shopId: 0,
        goodsType: type,
      });
      return { type, code, data };
    });

    const results = await Promise.all(promises);
    return results;
  };

  // 赋值图表
  const processDataArray = (dataArray: any, targetArray: any) => {
    if (dataArray.code === 10002) {
      const newData = dataArray.data.slice(0, dataArray.data.length - 1); // 因接口数据原因 删除最后一个无用数据
      for (const i of newData) {
        const name = i.title.split('-')[2].slice(0, -2);
        targetArray.value.push({
          value: [i.amountActuallyPaid],
          name,
          itemStyle: {
            color: colorObject[name],
          },
        });
      }
    }
  };

  const fenchData = async () => {
    try {
      const results = await fetchDataPromise(goodsTypes);
      for (let i = 0; i < results.length; i++) {
        const targetArray = [type1Arr, type5Arr, type7Arr, type8Arr, type12Arr][
          i
        ];
        processDataArray(results[i], targetArray);
      }
    } catch (error) {
      console.error(error);
    }
  };
  fenchData();
</script>

<style scoped lang="less"></style>
